<template>
	<view class="main">
		<view class="card flex flex-ai-c">
			<view class="first">
				<image :src="userinfo.handimg||'../../static/img/headimg.jpg'"></image>
			</view>
			<view>{{userinfo.username}}</view>
		</view>
		<view class="card flex flex-ai-c" @click="isShow = true">
			<view class="first"><u-icon name="plus-circle" size="40rpx"></u-icon></view>
			<view>添加账号</view>
		</view>

	</view>
	<view class="main" @click="logOut">
		<view class="card flex flex-jc-c" style="color: red;">
			退出当前账号
		</view>
	</view>
	<u-popup v-model="isShow" mode="center" border-radius="15">
		<view style="padding: 40rpx 60rpx;">
			<u-form :model="form" label-width="120rpx">
				<u-form-item label="账号" prop="account">
					<u-input v-model="form.account" placeholder="手机号" @confirm="submit" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="form.password" placeholder="请输入密码" @confirm="submit" />
				</u-form-item>
			</u-form>
			<u-button @click="submit">加入</u-button>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { inject, ref, reactive } from 'vue'
	const socket : any = inject("$socket");
	let userinfo = uni.getStorageSync('userinfo')
	let isShow = ref(false)
	interface Vform {
		username : string,
		account : string
		password : string
	}
	let form = reactive<Vform>({
		username: '',
		account: '',
		password: ''
	})
	const submit = () => {
		
	}
	const logOut = () => {
		// socket.disconnect()
		uni.removeStorageSync('token')
		uni.removeStorageSync('userinfo')
		uni.showToast({
			title: '退出成功',
			icon: 'none',
			duration: 2000,
			success: () => {
				uni.reLaunch({
					url: '/pages_logins/logins'
				})
			},
		})

	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: gainsboro;
	}

	image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 1px solid gainsboro;
	}

	.first {
		margin-right: 20rpx;
	}

	.main {
		margin-top: 30rpx;
	}

	.card {
		border-bottom: 1px solid gainsboro;
		padding: 30rpx;
		background-color: #fff;
	}
</style>